<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud ref="crudRef" :columns="columns" :options="crud">

      <template #tableAfterButtons>
        <a-button @click="publish(selectedKeys)">发布</a-button>
        <a-button @click="unPublish(selectedKeys)">取消发布</a-button>
      </template>

      <!-- 排序列 -->
      <template #sort="{ record }">
        <a-input-number
            :default-value="record.sort"
            :max="1000"
            :min="0"
            mode="button"
            @change="changeSort($event, record.id)"
        />
      </template>
      <!-- 图标列 -->
      <template #icon="{ record }">
        <component :is="record.icon" v-if="record.icon"/>
      </template>
      <!-- 状态列 -->
      <template #status="{ record }">
        <a-switch
            :checked-value="1"
            :default-checked="record.status == 1"
            unchecked-value="2"
            @change="changeStatus($event, record.id)"
        />
      </template>

      <!-- 操作前置扩展 -->
      <template #operationBeforeExtend="{ record }">
        <a-link @click="unPublish(record.id)" v-if="record.is_publish" status="danger">
          <icon-plus/>
          取消发布
        </a-link>
        <a-link @click="publish(record.id)" v-else>
          <icon-plus/>
          发布
        </a-link>
      </template>
    </ma-crud>
  </div>
</template>

<script setup>
import {computed, reactive, ref, toRef} from 'vue'
import menu from '@/api/system/menu'
import {Message} from '@arco-design/web-vue'
import sitePublicMenu from "@/api/site/sitePublicMenu.js"

const crudRef = ref()
const currentParentId = ref()
const selectedKeys = toRef(() => {
  if (!crudRef.value) {
    return []
  }
  return crudRef.value.tableRef.selectedKeys
})

let isRecovery = computed(() => crudRef.value ? crudRef.value.isRecovery : false)

const menuType = [
  {label: '菜单', value: 'M'},
  {label: '按钮', value: 'B'},
  {label: '外链', value: 'L'},
  {label: 'iFrame', value: 'I'},
]

const changeStatus = async (status, id) => {
  const response = await menu.changeStatus({id, status})
  if (response.success) {
    Message.success(response.message)
  }
}

const publish = async (id) => {
  // id是否数组
  let idList = Array.isArray(id) ? id : [id]
  if (idList.length < 1) {
    Message.error('请选择要发布的菜单')
    return
  }
  const response = await sitePublicMenu.publish({menu_id_list: idList})
  if (response.success) {
    Message.success('发布成功')
    crudRef.value.refresh()
  }
}

const unPublish = async (id) => {
  // id是否数组
  let idList = Array.isArray(id) ? id : [id]
  if (idList.length < 1) {
    Message.error('请选择要取消发布的菜单')
    return
  }
  const response = await sitePublicMenu.unPublish({menu_id_list: idList})
  if (response.success) {
    Message.success('取消发布成功')
    crudRef.value.refresh()
  }
}

const changeSort = async (value, id) => {
  const response = await menu.numberOperation({id, numberName: 'sort', numberValue: value})
  if (response.success) {
    Message.success(response.message)
  }
}

const crud = reactive({
  api: sitePublicMenu.getList,
  recycleApi: menu.getRecycleList,
  showIndex: false,
  pageLayout: 'fixed',
  rowSelection: {showCheckedAll: true, checkStrictly: false},
  operationColumn: true,
  operationColumnWidth: 200,
  formOption: {viewType: 'drawer', width: 600},
  isExpand: true,
})

const columns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true},
  {
    title: '上级菜单', dataIndex: 'parent_id', hide: true, formType: 'tree-select',
    dict: {url: 'system/menu/tree', params: {onlyMenu: true}}, addDefaultValue: 0,
    editDefaultValue: (record) => {
      return record.parent_id == 0 ? undefined : record.parent_id
    }
  },
  {
    title: '菜单名称',
    dataIndex: 'name',
    search: true,
    commonRules: [{required: true, message: '菜单名称必填'}],
    width: 180,
  },
  {
    title: '菜单类型', dataIndex: 'type', formType: 'radio', addDefaultValue: 'M', width: 100,
    dict: {
      data: menuType, translation: true,
      tagColors: {'M': 'blue', 'B': 'green', 'L': 'orangered', 'I': 'pinkpurple'}
    },
    onControl: (value, maFormObject) => {
      const service = maFormObject.getColumnService()
      const dataIndexList = ['icon', 'route', 'component', 'redirect', 'sort', 'is_hidden', 'restful']
      if (value === 'B') {
        dataIndexList.map(name => service.get(name).setAttr('display', false))
        return
      }
      if (['I', 'L'].includes(value)) {
        dataIndexList.map(name => service.get(name).setAttr('display', ['icon', 'route', 'sort', 'is_hidden'].includes(name)))
        return
      }
      dataIndexList.map(name => service.get(name).setAttr('display', true))
    },
  },
  {
    title: '排序', dataIndex: 'sort', formType: 'input-number', addDefaultValue: 1, width: 100,
    min: 0, max: 1000
  },
  {
    title: '隐藏', dataIndex: 'is_hidden', search: true, formType: 'radio',
    dict: {
      data: [{label: '是', value: '1'}, {label: '否', value: '2'}],
      translation: true
    },
    addDefaultValue: '2', editDefaultValue: (form) => form.is_hidden.toString(), width: 80,
  },
  {
    title: '状态', dataIndex: 'status', search: true, formType: 'radio',
    dict: {name: 'data_status', props: {label: 'title', value: 'key'}},
    addDefaultValue: '1', width: 120,
  },
  {
    title: '创建时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false,
    search: true, formType: 'range', width: 180,
  },
])
</script>

<style scoped>
.icon {
  width: 1em;
}
</style>

<script> export default {name: 'site:publicMenu'} </script>